<template>
  <div class="container">
    <scroller ref="scroller-detail" :showRefresh="false" @refresh="onrefresh">
      <div class="main">
        <div style="justify-content:center" v-if="!showMore">
            <slider class="slider size" auto-play="true">
              <div v-for="src in bean.pictures">
                <image class="size" resize="cover" :src="src"></image>
              </div>
              <indicator class="indicator"></indicator>
            </slider>
        </div>
        <div class="uparrow" v-if="showMore" @click="onup">
          <am-icon type="up" size="sm"  />
        </div>
        <div class="info">
          <text class="title">选择规格</text>
        </div>
        <div class="info" @touchstart="onweb">
          <text class="title">详细</text>
          <am-html  :width="750" :height="750" :html="bean.details"></am-html>
        </div>
      </div>

    </scroller>
    <div class="bottom-menu">
      <wxc-button text="购买"
                @wxcButtonClicked="wxcButtonClicked"></wxc-button>
    </div>
    <div class="options" v-if="isBuy">
      <div v-for="i in 3">
        <text>option</text>
        <div class="option">
          <wxc-grid-select
            :single="true"
            :customStyles="customStyles"
            :list="testData1"
            @select="onSelect">
          </wxc-grid-select>
        </div>
      </div>
      <div class="mount">
          <text>数量</text>
          <wxc-stepper class="stepper"
                 step="1"
                 min="1"
                 @wxcStepperValueChanged="stepperValueChange"></wxc-stepper>
      </div>

      <div class="option-button">
        <wxc-button text="确认购买"
                  @wxcButtonClicked="wxcDoneClicked"></wxc-button>
      </div>
    </div>

  </div>
</template>
<script>
  import { WxcButton, WxcGridSelect, WxcStepper   } from 'weex-ui';
  import { AmHtml,AmIcon  } from 'weex-amui'
    var globalEvent = weex.requireModule('globalEvent');
    var modal = weex.requireModule("bmModal");
    module.exports = {
      components: {
        WxcButton,WxcGridSelect,WxcStepper,AmHtml,AmIcon
      },
        data:function() {
          return {
            showMore:false,
            isBuy:false,
            goodsid:0,
            bean:{
              name:'',
              details:'',
              spec:'',
              pictures:[]
            },
            customStyles: {
              icon: '',
              color: '#333333',
              checkedColor: '#ffffff',
              disabledColor: '#eeeeee',
              borderColor: '#666666',
              checkedBorderColor: '#ffb200',
              backgroundColor: '#ffffff',
              checkedBackgroundColor: '#ffb200'
            },
            testData1: [
              {
                'title': 'shanghai'
              },
              {
                'title': 'hangzhou',
                'checked': true
              },
              {
                'title': 'beijing'
              },
              {
                'title': 'guangzhou'
              },
              {
                'title': 'shengzhen'
              },
              {
                'title': 'nanjin'
              }
            ]
          }
        },
        methods: {
            onrefresh() {
              this.$refs["scroller-detail"].refreshEnd()
            },
            loadData() {
              this.$notice.loading.show("请等待");
              this.$fetch({
                method: 'GET',
                url: 'https://888.ph100.cn/goodsdetail?goodsid=121',
                data: {
                  goodsid:this.goodsid
                }
              }).then(resData => {
                // 成功回调
                console.log(resData);
                this.$notice.loading.hide();
                this.bean = resData["goods"];

                //var dd=this.bean.details.replace(/<\/?.+?>/g,"");
                //var dds=dd.replace(/&nbsp;/ig,'');
                //this.bean.details = dds;


              }, error => {
                // 错误回调
                console.log(error);
                this.$notice.loading.hide();
              })
            },
            wxcButtonClicked() {
              modal.toast({
                message:'buy'
              });
              this.isBuy = true;
            },
            wxcDoneClicked() {
              modal.toast({
                message:'done'
              });
              this.isBuy = false;
            },
            onSelect (params) {
              modal.toast({
                message:params.selectIndex
              });
            },
            stepperValueChange (e) {
              console.log(e.value);
              modal.toast({
                message:e.value
              });
            },
            onweb () {
              this.showMore = true;
            },
            onup () {
              this.showMore = false;
            },
        },
        created: function() {
          this.$router.getParams().then(resData => {
              console.log(resData)
              this.goodsid = resData.goodsid

              this.loadData();
          });
        }
    }
</script>
<style scoped>
.size {
  width: 750px;
  height: 320px;
}
.slider {
  position: relative;
}
.indicator {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.3);

  itemColor: #DDDDDD;
  itemSelectedColor: rgb(0, 180, 255);
}
.info{
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 16px;
  background-color: #ffffff;
}
.title{
  font-size: 40;
  padding-top: 10px;
  padding-bottom: 10px;
  border-width: 1px;
  border-color: #eeeeee;
}
.scroller-detail{
  flex: 1;
}
.bottom-menu{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  align-content: center;
  align-items: center;
}
.options{
  background-color: #ffffff;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.option{
  margin-bottom: 16px;
}
.option-text{
  margin: 8px;
  border-radius: 16px;
  border-width: 1px;
  text-align: center;
}
.option-button{
  align-items: center;
  margin-bottom: 16px;
}
.mount{
  flex-direction: row;
  height: 66px;
}
.stepper{
  position: absolute;
  right: 16px;
  top: 0;
}
.uparrow{
  justify-content:center;
  background-color: #ffffff;
  flex-direction:row
}
</style>
